<script setup lang="ts">
// 组件
import RoomStatus from './components/RoomStatus.vue';
import RoomMessage from './components/RoomMessage.vue';
import RoomAction from './components/RoomAction.vue';
// 类型和枚举
import type { TimeMessages, Message } from '@/types/room'
import type { ConsultOrderItem, Image } from "@/types/consult";
import {MsgType} from '@/enums'
// 接口
import { getOrderDetailAPI } from "@/services/consult";
// 聊天相关
import { io } from "socket.io-client";
import { baseURL } from "@/utils/request";
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
import { ref } from 'vue';
import { nextTick } from 'vue';
import { provide } from 'vue';
const route = useRoute();
const store = useUserStore()

// 这里可以链接 socket 进行聊天
// 对于聊天其实就是三件事情
// 0. 链接服务器
const socket = io(baseURL, {
  auth: {
    token: `Bearer ${store.user.token}`
  },
  query: {
    orderId: route.query.orderId
  }
});


// 2. 接收别人的消息
// chatMsgList 接收聊天记录
const list = ref<Message[]>([])
socket.on('chatMsgList', ({ data }: { data: TimeMessages[] }) => {
  // 这个data是多个时间消息小组对象所组成的数组
  // data = [
  //   // 这里是各个时间快的对象
  //   {
  //     createTime: 20240101,
  //     items: [
  //       '你好',
  //       '中午吃啥'
  //     ]
  //   },
  //   {
  //     createTime: 20240102,
  //     items: [
  //       '你好',
  //       '昨天中午吃了啥'
  //     ]
  //   },
  // ]
  // 我们从中取出第0个来做演示
  // const items = data[0].items;
  // 其实现实当中, 需要全部都拿出来, 进行拼接
  data.forEach(el => {
    const items = el.items;
    list.value.push(...items);
  });
  console.log(list.value);

  nextTick(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });
})
// 除了接收聊天记录以外, 别人给我发的消息还包括, 即时通讯
socket.on('receiveChatMsg', (res) => {
  console.log(res);
  
  list.value.push(res);
  nextTick(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });
})
// socket.on("chatMsgList", ({ data }: { data: any[] }) => {
//     // list.value.push(...data[0].items)
// });
// sendChatMsg 发送消息
// receiveChatMsg 接收消息
// updateMsgStatus 消息已读
// getChatMsgList 获取聊天记录
// statusChange 接收订单状态改变

// 订单状态
// 发请求获取
const consult = ref<ConsultOrderItem>();
// consult 是当前问诊数据对象
// 因为在子组件 RoomMessage 之下的孙子组件 EvaluateCard 也需要, 
// 这里用依赖注入, 传入
provide("consult", consult);

const loadDetailData = async () => {
  const res = await getOrderDetailAPI(route.query.orderId as string);
  consult.value = res.data;
};
loadDetailData()
// 这里注意发请求的数据, 一开始拿到结果就定死了, 
// 现在需要监听 websocket 通知的状态改变时间, 重新渲染吗
socket.on("statusChange", () => {
  loadDetailData()
})


// 1. 自己给被人发消息
// 发送文字消息
const sendText = (text: string) => {
  socket.emit("sendChatMsg", { 
    from: store.user?.id,
    to: consult.value?.docInfo?.id,
    msgType: MsgType.MsgText,
    msg: { content: text },
   });
}
// 发送图片消息
const sendImage = (img: Image) => {
  socket.emit("sendChatMsg", { 
    from: store.user?.id,
    to: consult.value?.docInfo?.id,
    msgType: MsgType.MsgImage,
    msg: { picture: img },
   });
}

// 评价完毕时, 孙组件发送完请求, 需要在这个总主页面修改以下数据, 渲染结果
const changeEvaluateStatus = (score: number) => {
  // 这里用来修改评价状态
  // 1. 拿到聊天记录列表, 找出没有评价的卡片那条数据
  const item = list.value.find(item => item.msgType === MsgType.CardEvaForm)
  // 2. 改变痛的状态
  if(!item) return
  item.msgType = MsgType.CardEva
  // 3. 往里面添加评价内容
  item.msg.evaluateDoc = { score }
}

provide('changeEvaluateStatus', changeEvaluateStatus)
</script>

<template>
  <div class="room-page">
    <CpNavBar title="医生问诊室" />
    <RoomStatus :consult="consult" />
    <RoomMessage :list="list" />
    <RoomAction :consult="consult" @send-text="sendText" @send-image="sendImage" />
  </div>
</template>
  
<style lang="scss" scoped>
.room-page {
  // padding-top: 90px;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--cp-bg);

  .van-pull-refresh {
    width: 100%;
    min-height: calc(100vh - 150px);
  }
}
</style>